import loadable from '@loadable/component'

import {loadQuery, } from "react-relay/hooks";
import {Environment} from "relay-runtime";
//import  TaskMainQuery  from "./__generated__/TaskMainQuery.graphql";
//import  OneTaskMainQuery  from "./__generated__/OneTaskMainQuery.graphql";
import {useContext} from "react";
import UserContext from "../routing/UserContext";
//import queryString from "querystring";
import ModelConfigs from "./modelConfigs";
import * as React from "react";
import ViewReportMainQuery from "./__generated__/ViewReportMainQuery.graphql";
import OriginalRecordMainQuery from "./__generated__/OriginalRecordMainQuery.graphql";
import JSResource from "../JSResource";
//import IspEntranceQuery from "./device/__generated__/IspEntranceQuery.graphql";
//import {PreloadableConcreteRequest} from "react-relay/relay-hooks/EntryPointTypes";
//import  DetailedGuideQuery  from "./__generated__/DetailedGuideQuery.graphql";

const queryString = require('query-string');
/**
 * 【特别！】实际返回的是两个二级路由器合体版，实际应该看成一级路由层次的分体了,/tasks和/task是两个路由主分支，并不属同一个二级路由。
路由分层：prepare: (params) => {}每一层次的入口组件=Container预定义relay数据Query，每层路由独立的graphql请求包。
 一般任务Task是后台独立管理程序主动生成的，并非前端的事情；但是非普通任务是前端新加的。
 * */
export default function secondRouter(environment: Environment) {
    //这里是全局JS环境，并非Hook和组件函数场合。配置里面的prepare:()=>{}是按点击<Link>触发的代码。
    //上下级的路由都难于共享数据的。
  return (
      [
          {
              path: '/reportView/:template/ver/:verId/:repId',
              exact: true,           //本路径:要么搜索进入：或审批指引进入的。
              component: loadable(() => import('./ViewReportMain')),
              prepare: (params:any) => {
                  const typetoFile = ModelConfigs(params.template);
                  if(!typetoFile)  throw new Error(`没有${params.template}类型模板`);
                  const path =typetoFile +".E";     //动态找回具体的可执行Tsx文件路径
                  //const resource= loadable( () => import(`${path}`));
                  const resource = loadable.lib(() => import(`${path}`));
                  resource.load().catch((e: any) => {
                      throw new Error(`没找到模板${e}`);
                  });
                  //遭遇了：window.history.state==null 同时 repId==50691?&print=1 ,render搞2回，第二次repId==50691才正常;
                  console.log(`路由历史/11 preview/:repId:`, params, window.history.state);
                  return {
                      template: resource,
                      //必需经过路由，直接手动输入URL没有state={};
                      query: window.history.state && loadQuery(
                          environment as any,
                          ViewReportMainQuery as any,
                          {
                              id: params.repId,
                          },
                          { fetchPolicy: 'store-or-network' },
                      )
                  };
              },
          },
          //编辑模式的：OriginalRecordMain提供了<EditStorageContext.Provider value={{ storage, setStorage }}>这样低下RecordStarter子路由页面要用的;同时Mount等于一个路由页面。
          {
              path: '/report/:template/ver/:verId/:repId',
              component: loadable( () => import('./OriginalRecordMain')),
              prepare: (params:any) => {
                  console.log(`路由历史222 编辑器报告的:`, params);
                  const typetoFile = ModelConfigs(params.template);
                  if(!typetoFile)  throw new Error(`没有${params.template}类型模板`);
                  const path =typetoFile +".E";     //动态找回具体的可执行Tsx文件路径 `report_${params.template}_${params.verId}`
          //        const resource= JSResource( `report_${params.template}_${params.verId}`,() => import(`${path}`));
                  //const resource = loadable( (props:any) => import(`${path}`));
                  //完全动态加载，非Component形态的资源。
                  const resource = loadable.lib(() => import(`${path}`));
                  //Moment = loadable.lib(() => import('./elevator/PeriodicalInspection.E'));
                  resource.load().catch((e: any) => {
                      throw new Error(`没找到模板${e}`);
                  });

                  return {
                      template: resource,
                      query: loadQuery(
                          environment as any,
                          OriginalRecordMainQuery as any,
                          {
                              id: params.repId,
                          },
                          { fetchPolicy: 'store-or-network' },
                      )
                  };
              },
              routes:[
                  {
                      path: '/report/:template/ver/:verId/:repId/flowSelect',
                      exact: true,
                      component: loadable( () => import('./FlowSelect')),
                      prepare: (params:any) => {
                          console.log(`路由流转确认params:`, params, window.history.state);
                          return {
                          };
                      },
                  },
                  {
                      //这个是右半边的子页面，实际上和左半边父辈页面OriginalRecordMain要组合一起的，组成完整的特定路由器路由页面，左右两个组件实际上等同一个路由页面共享生命周期和history API状态。
                      path: '/report/:template/ver/:verId/:repId/:action',
                      exact: true,
                      component: loadable(() => import('./RecordEditorMain')),
                      prepare: (params:any) => {
                          console.log(`路由历史33 编辑器报告的:`, params);
                          const typetoFile = ModelConfigs(params.template);
                          if(!typetoFile)  throw new Error(`没有${params.template}类型模板`);
                          const path =typetoFile +".E";     //动态找回具体的可执行Tsx文件路径 `report_${params.template}_${params.verId}`
                          //        const resource= JSResource( `report_${params.template}_${params.verId}`,() => import(`${path}`));
                          //const resource = loadable( (props:any) => import(`${path}`));
                          //完全动态加载，非Component形态的资源。
                          const resource = loadable.lib(() => import(`${path}`));
                          //Moment = loadable.lib(() => import('./elevator/PeriodicalInspection.E'));
                          resource.load().catch((e: any) => {
                              throw new Error(`没找到模板${e}`);
                          });

                          return {
                              template: resource,
                              query: loadQuery(
                                  environment as any,
                                  OriginalRecordMainQuery as any,
                                  {
                                      id: params.repId,
                                  },
                                  { fetchPolicy: 'store-or-network' },
                              )
                          };
                      },
                  },
              ],

          },
          //多个二级路由层次的情况,合体版本[];
          {
              path: '/reportPdf',
              //exact: true,
              component: loadable(() => import('./Layout')),
              prepare: (params:any) => {
              },
          }
      ]

  );
}

